import React, { Component } from 'react'
// 非受控组件: 指直接操作真实dom
// 如何在react中获取到真实dom
// 1. documnet.get...  当渲染完毕之后获取
// 2. e.target 只能拿到事件目标
// 3. react提供了获取真实dom的方式 --> refs

// refs的用法:
// 第一种:
// 1. 创建ref对象
const ref = React.createRef()
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 2. 让ref对象和要操作的标签进行绑定. 绑定之后,当这个input的真实dom被创建出来之后,则react会自动将它的真实dom赋值给ref对象的current属性*/}
        <input type="text" ref={ref} />

        <button
          onClick={() => {
            // console.log(ref)
            ref.current.value = '123'
          }}
        >
          按钮
        </button>
      </div>
    )
  }
}
